import React from 'react';
import {
  Form,
  Input,
  Button,
  Select,
  Table,
  Modal,
  Popover,
  Pagination,
  Message,
  Icon,
  DatePicker,
  Row,
  Col
} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

let List = React.createClass({

  getInitialState() {
    return {
      visible: false,
      data: [],
      forms: {},
      paramData: [],
      record: [],
      pagination: {
        current: 1,
        pageSize: 5
      },
      detailData:[],
      tenementId:''
    }
  },
  
  componentDidMount() {
    // this.handleSearch()
  },

  fetch(param){
    let _me = this;
    let page = this.state.pagination.current;
    let tenementId = this.state.tenementId;
    let forms = this.state.forms.costType;
    let params = Object.assign({},{costType: forms}, {pageSize: 5, currentPage: page }, {tenementId: tenementId});
    Utils.sendAjax({
      url: '/finance/fund/detail',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code == '200') {
          _me.setState({
            detailData: result.data,
            pagination: result.page
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },

  componentWillReceiveProps(nextProps) {
    console.log(nextProps);
    let pager = this.state.pagination;
    pager.total = nextProps.pagination.total;
    this.setState({
      visible: nextProps.visible,
      record: nextProps.record,
      tenementId: nextProps.tenementId,
      detailData: nextProps.detailData,
      pagination: pager,
      data: []
    })
  },

  handleTableChange(pagination) {
      const pager = this.state.pagination;
      pager.current = pagination.current;
      this.setState({
          pagination: pager,
      });
      this.fetch();
  },

  handleCancel() {
    this.props.callHide();
    this.handleReset();
    const pager = this.state.pagination;
    pager.current = 1;
    this.setState({
      data: [],
      pagination: pager
    })
  },


  handleSearch() {
    this.setState({
      pagination: {
      current: 1,
    }})
    this.fetch();
  },


  handleReset() {
    this.setState({
      forms: {
        costTypeId : '',
        startTime: null,
        endTime: null,
      }
    });
  },

  rowKey(data) {
    return data.id;
  },

  handleChange(filed, val) {
    let newStr = this.state.forms;
    let name = filed;
    let value = filed == 'costType' ? val : Utils.formatDate(val);
    newStr[name] = value;
    this.setState({
      forms: newStr
    })
    console.log(newStr);
  },
  
  render() {

    console.log('this.state.pagination',this.state.pagination);
    const {getFieldProps} = this.props.form;

    const columns = [
      {
        title: '费用对象',
        render: (text, record) => (
          <span>{record.costObj == 1 ? '房源' : record.roomName}</span>
        )
      }, {
        title: '费用类别',
        render: (text, record) => (
          <span>{record.payType == 1 ? '收入' : '支出'}</span>
        )
      }, {
        title: '费用项目',
        dataIndex: 'logTypeName'
      }, {
        title: '金额',
        dataIndex: 'amount'
      }, {
        title: '交易日期',
        dataIndex: 'createTime'
      }, {
        title: '费用开始日期',
        dataIndex: 'startTime'
      }, {
        title: '费用结束日期',
        dataIndex: 'endTime'
      },
    ];
    console.log(this.state.pagination);
    return (
      <Modal title="查看账单" visible={this.state.visible}
             onOk={this.handleOk} onCancel={this.handleCancel} width={900}
             footer=""
      >
        <Form inline>
          <Row gutter={24}>
            <Col sm={24}>
              <FormItem label="费用对象">
                <Select value={this.state.forms.costType} onChange={this.handleChange.bind(this, 'costType')}
                        placeholder="费用对象" style={{ width: 120 }}>
                  <Option value="1">房源</Option>
                  <Option value="2">房间</Option>
                  <Option value="3">整租</Option>
                </Select>
              </FormItem>
              <FormItem>
                <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
                <Button type="default" onClick={this.handleReset}>重置</Button>
              </FormItem>
            </Col>
          </Row>

        </Form>
        <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.detailData }
               onChange={this.handleTableChange}
               pagination={this.state.pagination}/>
      </Modal>

    );
  }
});

List = Form.create()(List)
export default List